<template>
  <div class="date-time-dome">
    <picker
      v-model="show"
      :data-items="items"
      @change="onDateChange"
    >
      <div
        class="top-content border-bottom-1px"
        slot="top-content"
      >
        <span
          class="picker-cancel"
          @click="show=false"
        >取消</span>
        <span class="picker-title">设置成立日期</span>
        <span
          class="picker-ok"
          @click="show=false"
        >完成</span>
      </div>
    </picker>
    <div
      class=""
      @click="show=true"
    >show</div>
  </div>
</template>

<script>
import Picker from 'vue-3d-picker'
export default {
  components: {
    Picker
  },
  data() {
    let generateYearData = () => {
      let thisYear = new Date().getFullYear()
      let result = [],
        i = thisYear - 100,
        end = thisYear + 1;
      for (; i < end; i++) {
        result.unshift({
          value: i
        })
      }
      return result
    }
    return {
      show: false,
      items: [
        {
          values: generateYearData(),
        }, {
          values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        }
      ]
    }
  },
  methods: {
    onDateChange(result1, result2) {
      console.log(result1.value, result2)
    }
  }
}
</script>

<style scoped lang="scss">
.top-content {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.3rem;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .picker-cancel {
    font-size: 0.3rem;
    color: #999;
  }
  .picker-title {
    font-size: 0.34rem;
    color: #333;
  }
  .picker-ok {
    font-size: 0.3rem;
    color: #bc903a;
  }
}
</style>
